<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ maptitle }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
      <dv-border-box-13>
        <!-- <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
          中国
        </div> -->

        <Echart id="CenterMap" :options="options" ref="CenterMap" />
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
import xzqCode from "../../utils/map/xzqCode";
import { currentGET } from "api/modules";
import * as echarts from "echarts";
import { GETNOBASE } from "api";
import xianMap from "@/utils/map/xian.json";
export default {
  data() {
    return {
      maptitle: "设备分布图",
      options: {},
      code: "xian", //china 代表中国 其他地市是行政编码
      echartBindClick: false,
      isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
      list: [
        { name: '雁塔区', value: 1043521 },
        { name: '未央区', value: 642166 },
        { name: '长安区', value: 521760 },
        { name: '碑林区', value: 401354 },
        { name: '莲湖区', value: 280948 },
        { name: '灞桥区', value: 240812 },
        { name: '新城区', value: 240812 },
        { name: '高陵区', value: 200677 },
        { name: '鄠邑区', value: 160542 },
        { name: '阎良区', value: 160542 },
        { name: '临潼区', value: 120406 }
      ],
    };
  },
  created() {},

  mounted() {
    // console.log(xzqCode);
    this.getData("xian");
  },
  methods: {
    getData() {
      this.getGeojson('xian', this.list);
    },

    getGeojson(name, mydata) {
      echarts.registerMap('xian', xianMap);
      this.init(name, mydata);      
    },
    init() {
      let top = 75;
      let zoom = 1.2;
      let option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          show: true,
        },
        legend: {
          show: false,
        },
        // visualMap: {
        //   left: 20,
        //   top: 40,
        //   pieces: [
        //     { gte: 1000000, label: "1000000以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
        //     { gte: 600001, lte: 1000000, label: "60-100万" },
        //     { gte: 400001, lte: 600000, label: "40-60万" },
        //     { gte: 240001, lte: 400000, label: "24-40万" },
        //     { gte: 160001, lte: 240000, label: "16-24万" },
        //     { gte: 120001, lte: 160000, label: "12-16万" },
        //     { lte: 120000, label: "1-12万" }, // 不指定 min，表示 min 为无限大（-Infinity）。
        //   ],
        //   inRange: {
        //     // 渐变颜色，从小到大
        //     color: [
        //       "#c3d7df",
        //       "#5cb3cc",
        //       "#8abcd1",
        //       "#66a9c9",
        //       "#2f90b9",
        //       "#1781b5",
        //     ],
        //   },
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        geo: {
          map: 'xian',
          roam: false,
          selectedMode: false, //是否允许选中多个区域
          zoom: zoom,
          top: top,
          // aspectScale: 0.78,
          show: false,
        },
        series: [
          {
            name: "MAP",
            type: "map",
            map: 'xian',
            // aspectScale: 0.78,
            data:  [
              { name: '雁塔区', value: 1043521 },
              { name: '未央区', value: 642166 },
              { name: '长安区', value: 521760 },
              { name: '碑林区', value: 401354 },
              { name: '莲湖区', value: 280948 },
              { name: '灞桥区', value: 240812 },
              { name: '新城区', value: 240812 },
              { name: '高陵区', value: 200677 },
              { name: '鄠邑区', value: 160542 },
              { name: '阎良区', value: 160542 },
              { name: '临潼区', value: 120406 }
            ],
            // data: [1,100],
            selectedMode: false, //是否允许选中多个区域
            zoom: zoom,
            geoIndex: 1,
            top: top,
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data) {
                  return params.name+"：" + params.data["value"];
                } else {
                  return params.name;
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            label: {
              show: false,
              color: "#000",
              // position: [-10, 0],
              formatter: function (val) {
                if (val.data !== undefined) {
                  return val.name.slice(0, 2);
                } else {
                  return "";
                }
              },
              rich: {},
            },
            emphasis: {
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "#389BB7",
                borderWidth: 1,
              },
            },
            itemStyle: {
              borderColor: "rgba(147, 235, 248, .8)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺为 false
              },
              shadowColor: "rgba(128, 217, 248, .3)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
          },
        ],
         //动画效果
            // animationDuration: 1000,
            // animationEasing: 'linear',
            // animationDurationUpdate: 1000
      };
      this.options = option;
    },
    // message(text) {
    //   this.$Message({
    //     text: text,
    //     type: "warning",
    //   });
    // },
    // mapclick() {
    //   if (this.echartBindClick) return;
    //   //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
    //   this.$refs.CenterMap.chart.on("click", (params) => {
    //     // console.log(params);
    //     let xzqData = xzqCode[params.name];
    //     if (xzqData) {
    //       this.getData(xzqData.adcode);
    //     } else {
    //       this.message("暂无下级地市!");
    //     }
    //   });
    //   this.echartBindClick = true;
    // },
  },
};
</script>
<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 548px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
</style>
